<template>
  <div class="container" id="page-get-back-password">
    <div class="register-wrap">
      <div class="register-box">
        <div class="register-text">
          忘记密码
        </div>
        <div class="logo">
          <img alt="logo" src="../assets/img/public_logo-color.png">
        </div>
        <div class="logo-text">
          捕获专属你的商机
        </div>

        <el-form :model="form" :rules="rules" autocomplete="off" class="register-form" label-width="80px"
                 ref="registerForm">
          <el-form-item class="user-name" label="手机号" prop="username">
            <el-input class="input-username" placeholder="请输入手机号" type="text" v-model="form.username"/>
          </el-form-item>
          <el-form-item class="password" label="密码" prop="password">
            <el-input placeholder="请输入新密码" type="password" v-model="form.password"/>
          </el-form-item>
          <el-form-item class="confirm-password" label="确认密码" prop="confirmPassword">
            <el-input placeholder="请再次输入密码" type="password" v-model="form.confirmPassword"/>
          </el-form-item>
          <el-form-item class="message-code" label="验证码" prop="messageCode">
            <el-input placeholder="请输入短信验证码" type="text" v-model="form.messageCode"/>
            <span @click="sendMessageCode('registerForm')" class="message-code-rest"
                  v-if="sendMessageCodeStatus">
                            发送验证码
                        </span>
            <span class="message-code-rest" v-else>
                            {{ restSecond + '秒后重新发送' }}
                        </span>
          </el-form-item>
          <!--<div class="agree-agreement">
              <span class="check-box" :class="{active:isAgreeAgreement}" @click="agreeAgreement"></span>
              <span class="text">已阅读并同意 <a href="javascript:">《易找标注册协议》</a></span>
          </div>-->
          <el-form-item>
            <el-button @click="onSubmit('registerForm')" class="btn-register" type="primary">确定修改
            </el-button>
          </el-form-item>
          <!--<span class="register">
              已有账号？请
              <router-link :to="{name:'login'}" style="color: #409EFF">登录</router-link>
          </span>-->
        </el-form>
      </div>
    </div>
    <!--<div id="wrapper">
        <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
            <h3 class="login-title">重置密码</h3>
            <el-form-item label="手机号" prop="username">
                <el-input class="input-username" type="text" placeholder="请输入手机号" v-model="form.username"/>
                <el-button class="send-code" type="primary">发送验证码</el-button>
            </el-form-item>
            <el-form-item label="验证码" prop="messageCode">
                <el-input type="text" placeholder="请输入短信验证码" v-model="form.messageCode"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
                <el-input type="confirmPassword" placeholder="请再次输入密码" v-model="form.confirmPassword"/>
            </el-form-item>
            <el-form-item>
                <el-button class="btn-login" type="primary" v-on:click="onSubmit('loginForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>-->
  </div>
</template>

<script>
//comment
export default {
  // name: "getBackPassword1",
  data() {
    return {
      form: {
        username: '',
        messageCode: '',
        password: '',
        confirmPassword: ''
      },

      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      rules: {
        username: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.utils.testPhoneNumber(value)) {
                callback();
              } else {
                callback(new Error('请输入正确的手机号码'));
              }
            },
            trigger: 'change'
          }
        ],
        messageCode: [
          {required: true, message: '短信验证码不可为空', trigger: 'blur'}
        ],
        password: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入密码'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        confirmPassword: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'));
              } else if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致!'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ]
      },

      isAgreeAgreement: true,
      // 对话框显示和隐藏
      dialogVisible: false,
      sendMessageCodeStatus: 1,//0不能发送，1第一次发送，2重新发送
      restSecond: 60
    }
  },
  methods: {
    agreeAgreement() {//是否同意协议
      this.isAgreeAgreement = !this.isAgreeAgreement;
    },
    onSubmit(formName) {
      // 为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.isAgreeAgreement) {
            let loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.5)'
            });
            this.$request.getBackPassword({
              username: this.form.username,
              password: this.form.password,
              msgCode: this.form.messageCode
            }).then((res) => {
              console.log(res);
              loading.close();
              if (res.status == 200) {
                this.$router.push({
                  name: 'index'
                })
              } else {
                this.requestError(res.status, res.message)
              }
            }, (err) => {
              console.log(err);
              loading.close();
              this.requestFail(err);
            })
          }

        } else {
          return false;
        }
      });
    },
    sendMessageCode(formName) {//发送短信验证码
      this.$refs[formName].validateField('username', (msg) => {
        if (msg) {//未通过验证
        } else {
          console.log('通过验证');
          let loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.5)'
          });
          this.$request.sendSmsCode({
            tel: this.form.username
          }).then((res) => {
            console.log(res);
            loading.close();
            if (res.status == 200) {
              let timer = setInterval(() => {
                if (this.restSecond <= 1) {
                  clearInterval(timer);
                  this.sendMessageCodeStatus = 2;
                  this.restSecond = 60;
                } else {
                  this.sendMessageCodeStatus = 0;
                  this.restSecond -= 1
                }
              }, 1000)
            } else {
              this.requestError(res.status, res.message)
            }
          }, (err) => {
            console.log(err);
            loading.close();
            this.requestFail(err);
          })
        }
      })

    }
  }
}
</script>

<style scoped lang="less">
.container {
  font-family: "黑体";
  @register-wrap-width: 1200px;
  @register-wrap-height: 660px;

  .height;
  .bg("@{img-base-url}register_bg.png", no-repeat, bottom center);
  .bg-linear-gradient(#f79e2f, @main-color, up);
  .height;
  .min-width(1200px);
  .min-height(@register-wrap-height);
  position: relative;
  /*background: url("../assets/img/register_bg.png") bottom center;*/

  .register-wrap {
    .size(@register-wrap-width, @register-wrap-height);
    .center(known-x, @register-wrap-width);
    .center(known-y, @register-wrap-height);
    /*background: url("../assets/img/register_bg-2.png");*/
    .bg("@{img-base-url}register_bg-2.png", no-repeat, center, cover);
    background-color: #ffffff;
    .border-radius(16px);

    .register-box {
      .size;
      position: relative;

      .register-text {
        .fz(35px);
        .color(@main-color);
        position: absolute;
        top: 50px;
        left: 110px;
      }

      .logo {
        .size(307px, 76px);
        position: absolute;
        top: 183px;
        left: 110px;

        img {
          .size;
        }
      }

      .logo-text {
        .fz(59px);
        .color(#F68118);
        letter-spacing: 10px;
        position: absolute;
        left: 110px;
        top: 295px;
        font-family: AlibabaPuHuiTiR;
      }

    }
  }

  @media (min-width: 1520px) {
    @register-wrap-width: 1511px;
    @register-wrap-height: 834px;

    .register-wrap {
      .size(@register-wrap-width, @register-wrap-height);
      .center(known-x, @register-wrap-width);
      .center(known-y, @register-wrap-height);
      padding: 86px 120px;

      .register-box {
        .register-text {
          top: 20px;
        }
      }
    }
  }

  /*.login-box {
      border: 1px solid #DCDFE6;
      width: 350px;
      !*margin: 250px auto;*!
      padding: 35px 35px 15px 35px;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      box-shadow: 0 0 25px #909399;
  }

  .login-title {
      text-align: center;
      margin: 0 auto 40px auto;
      color: #303133;
  }

  .input-username {
      width: 170px;
  }

  .send-code {
      margin-left: 5px;
  }

  .btn-login {
      width: 80px;
      height: 35px;
      float: right;
      text-align: center;
  }*/
}
</style>
<style lang="less">
#page-get-back-password {

  .register-form {
    .width(468px);
    position: absolute;
    right: 0;
    padding: 0 16px;
    padding-top: 102px;
    font-family: AlibabaPuHuiTiR, "黑体";

    .agree-agreement {
      .fz(16px);
      .color(#7CB1E8);
      margin-bottom: 39px;

      .check-box {
        display: inline-block;
        .size(14px, 14px);
        border: 1px solid #7CB1E8;
        vertical-align: middle;
        cursor: pointer;

        &.active {
          /*background: url("../assets/img/register_icon-duigou.png");*/
          .bg("@{img-base-url}register_icon-duigou.png");
        }
      }

      .text {
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
      }
    }

    .el-form-item {
      &:before {
        display: none;
      }

      margin-bottom: 38px;

      .content-after(@w,@h,@bg-url) {
        display: inline-block !important;
        .size(@w, @h) !important;
        /*background: url("../assets/img/login_icon-user.png") no-repeat center;*/
        .bg("@{img-base-url}@{bg-url}.png");
        position: absolute;
        top: 50%;
        margin-top: -10px;
        .center(known-y, @h);
        left: 18px;
      }

      &.user-name {
        .el-form-item__content {
          &:after {
            .content-after(20px, 20px, 'login_icon-user');
          }
        }
      }

      &.message-code {
        .el-form-item__content {
          &:after {
            .content-after(21px, 16px, 'register_icon-message');
          }

          .message-code-rest {
            position: absolute;
            right: 30px;
            .fz(13px);
            .color(@main-color);
            .center(known-y, 16px);
            line-height: 1;
            cursor: pointer;
          }
        }
      }

      &.password {
        .el-form-item__content {
          &:after {
            .content-after(18px, 20px, 'login_icon-password');
          }
        }
      }

      &.confirm-password {
        .el-form-item__content {
          &:after {
            .content-after(21px, 20px, 'register_icon-graph-code');
          }
        }
      }

      .el-form-item__label {
        display: none !important;
      }

      .el-form-item__content {
        .width;
        margin-left: 0 !important;

        .el-input {

          &:before {
            display: inline-block !important;
            .size(20px, 20px) !important;
            background: url("@{img-base-url}login_icon-user.png") no-repeat center;
            position: absolute;
            top: 0;
            left: 0;
          }

          .el-input__inner {
            .size(423px, 55px) !important;
            border: 1px solid #EBEBEB;
            box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.12) !important;
            .border-radius(8px);
            padding-left: 52px;
          }
        }
      }

      &.is-error {
        .el-input__inner {
          border-color: #F56C6C !important;
        }
      }

      .btn-register {
        .size(423px, 54px);
        background: linear-gradient(180deg, rgba(246, 123, 20, 1), rgba(248, 163, 51, 1));
        box-shadow: 0 1px 7px 0 rgba(246, 131, 26, 0.51);
        .border-radius(27px);
        border: none;
        .fz(14px);
        font-weight: lighter;
      }
    }
  }
}
</style>
